<template>
    <div>
        <h2>添加</h2>
        <table class="table">
            <tbody>
                <tr>
                    <td>用户名：</td>
                    <td>
                        <input type="text" v-model="data.hoseName">
                    </td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td>
                        <input type="password" v-model="data.pwd">
                    </td>
                </tr>
                <tr>
                    <td>价格：</td>
                    <td>
                        <input type="text" v-model="data.hosePicr">
                    </td>
                </tr>
                <tr>
                    <td>房型：</td>
                    <td>
                        <select v-model="data.typeName">
                            <option value="">请选择</option>
                            <option value="1">大床房</option>
                            <option value="2">双床房</option>
                            <option value="3">豪华大床房</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>照片：</td>
                    <td>
                        <input type="file" @change="file">
                        <img :src="'https://localhost:7164'+data.hpseImg" alt="" style="width: 100px; height: 100px;">
                    </td>
                </tr>
                <tr>
                    <td>状态：</td>
                    <td>
                        <input type="radio" name="zhuangtai"  checked :value="true" v-model="data.zhuangtai">上架
                        <input type="radio" name="zhuangtai" :value="false"  v-model="data.zhuangtai">下架
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="添加" @click="Add">
                    </td>
                    <td>
                        <a href="Show">返回列表</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import axios from 'axios';
const file=(e:any)=>{
    var f=e.target.files[0];
    var fd=new FormData();
    if(f.size>2*1024*1024)
    {
        alert("不能超过2MB");
    }
    fd.append("f1",f);
    axios.post("https://localhost:7164/api/File/TuPian",fd).then(res=>{
        data.value.hpseImg=res.data;
    })
}
const data=ref({
   "hoseId": 0,
    "hoseName": "",
    "pwd": "",
    "hosePicr": 0,
    "typeName": "",
    "hpseImg": "",
    "zhuangtai": true
})
const Add=()=>{
    if(data.value.hoseName=="")
    {
        alert("用户名不能为空！");
        return
    }
    if(data.value.pwd=="")
    {
        alert("密码不能为空！");
        return
    }
    axios.post("https://localhost:7164/api/Hose/Add",data.value).then(res=>{
        if(res.data>0)
    {
        alert("添加成功！");
        location.href="Show";
    }
    else
    {
        alert("添加失败！")
    }
    })
}
</script>

<style scoped>

</style>